import React, { Suspense } from "react";
import routes from './routerConfig'
import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom'


type Props = {}

const index = (props: Props) => {
    const render = (arr: any[]) => {
        return arr.map((item, index) => {
            return <Route key={index} path={item.path} element={item.to ? <Navigate to={item.to} /> : <item.element />}>
                {
                    item.children && render(item.children)
                }
            </Route>
        })
    }
    return (
        <Suspense fallback={<div>...loading</div>}>
            <BrowserRouter>
                <Routes>
                    {
                        render(routes)
                    }
                </Routes>
            </BrowserRouter>
        </Suspense>
    )
}

export default index